<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>修改元素节点</title>
    <script type="text/javascript">
        function method02(){
            var tdElement=document.getElementById('td01');
            //获取文本标签对象
            var textElement=tdElement.firstChild;
            //创建span元素节点
            var spanElement=document.createElement('span');
            spanElement.innerHTML=textElement.value;
            //进行替换
            tdElement.replaceChild(spanElement,textElement);
        }
        function method01(tdElement){
        //获取span标签对象
            var spanElement=tdElement.firstChild;
        //创建文本框元素节点
            var textElement=document.createElement('input');
            textElement.type='text';
            textElement.value=spanElement.innerHTML;
            textElement.onblur=method02;
        //进行替换
            tdElement.replaceChild(textElement,spanElement);
        }
        function method04(){
            var tdElement=document.getElementById('td02');
            //获取文本标签对象
            var textElement=tdElement.firstChild;
            //创建span元素节点
            var spanElement=document.createElement('span');
            spanElement.innerHTML=textElement.value;
            //进行替换
            tdElement.replaceChild(spanElement,textElement);
        }
        function method03(tdElement){
            //获取span标签对象
            var spanElement=tdElement.firstChild;
            //创建文本框元素节点
            var textElement=document.createElement('input');
            textElement.type='text';
            textElement.value=spanElement.innerHTML;
            textElement.onblur=method04;
            //进行替换
            tdElement.replaceChild(textElement,spanElement);
        }
        function method06(){
            var tdElement=document.getElementById('td03');
            //获取文本标签对象
            var textElement=tdElement.firstChild;
            //创建span元素节点
            var spanElement=document.createElement('span');
            spanElement.innerHTML=textElement.value;
            //进行替换
            tdElement.replaceChild(spanElement,textElement);
        }
        function method05(tdElement){
            //获取span标签对象
            var spanElement=tdElement.firstChild;
            //创建文本框元素节点
            var textElement=document.createElement('input');
            textElement.type='text';
            textElement.value=spanElement.innerHTML;
            textElement.onblur=method06;
            //进行替换
            tdElement.replaceChild(textElement,spanElement);
        }
        function method08(){
            var tdElement=document.getElementById('td04');
            //获取文本标签对象
            var textElement=tdElement.firstChild;
            //创建span元素节点
            var spanElement=document.createElement('span');
            spanElement.innerHTML=textElement.value;
            //进行替换
            tdElement.replaceChild(spanElement,textElement);
        }
        function method07(tdElement){
            //获取span标签对象
            var spanElement=tdElement.firstChild;
            //创建文本框元素节点
            var textElement=document.createElement('input');
            textElement.type='text';
            textElement.value=spanElement.innerHTML;
            textElement.onblur=method08;
            //进行替换
            tdElement.replaceChild(textElement,spanElement);
        }
    </script>
</head>
<body>
<table align="center" width="60%" border="1px" cellspacing="0" cellpadding="0">
    <tr align="center">
        <td ondblclick="method01(this)" id="td01"><span>a</span></td>
        <td ondblclick="method03(this)" id="td02"><span>b</span></td>
        <td ondblclick="method05(this)" id="td03"><span>c</span></td>
        <td ondblclick="method07(this)" id="td04"><span>d</span></td>
        <td>更新&nbsp;&nbsp;&nbsp;删除</td>
    </tr>
</table>
</body>
</html>